{% extends "base.html" %}
{% import "bootstrap/wtf.html" as wtf %}

{% block head %}
{{super()}}
<link href="{{ url_for('static', filename='jquery-ui-1.12.1/jquery-ui.min.js') }}" rel="stylesheet" type="text/css" />
{% endblock %}

{% block page_content %}
<div class="page-header">
    <h1>相册与图片设置</h1>
</div>
<ol class="breadcrumb" id="navigation">
    <li><a href="{{ url_for('.index') }}" target="_blank">首页</a></li>
    <li><a href="{{ url_for('.edit_album', id=album.id) }}" target="_blank">编辑相册信息</a></li>
    <li class="active">照片编辑与排序</li>
    <li><a href="{{ url_for('.fast_sort', id=album.id) }}" target="_blank">快捷排序</a></li>
    <li class="pull-right"><a href="{{ url_for('.album', id=album.id) }}">返回</a></li>
    <li class="pull-right"><a href="{{ url_for('.add_photo', id=album.id) }}" target="_blank">添加图片</a></li>
</ol>

<form action="{{ url_for('.edit_photo', id=album.id) }}" method="POST">
    <div class="sort-area">
    <div class="row">
    <section id="wrapper">
	<ul class="images images-edit" id="images">
        {% for photo in enu_photos %}
		<li><div class="edit-thumbnail">
                <img class="img-responsive portrait" src="{{ photo[1].url_t }}" alt="Some description"/>
            </div><br>
            <textarea name="{{ photo[1].id }}" placeholder="添加描述" rows="3">{% if photo[1].about %}{{ photo[1].about }}{% endif %}</textarea>
            <input class="order" type="hidden" name="order-{{ photo[1].id }}" value="{{ photo[0] + 1 }}"><br>
            设为封面<input type="radio" name="cover" value="{{ photo[1].url_t }}" {% if photo[1].url_t == album.cover %}checked{% endif %}>
            <a href="#" data-href="{{ url_for('.delete_edit_photo', id=photo[1].id) }}" class="pull-right btn btn-danger btn-xs" data-toggle="modal" data-target="#confirm-delete">删除</a>
        </li>
        {% endfor %}
	</ul>
    </section>
    </div>
    <div class="row text-center">
        <hr>
        <input class="btn btn-success" type="submit" name="submit" value="提交">&nbsp;&nbsp;
        <a class="btn btn-default" href="{{ url_for('.album', id=album.id) }}">取消</a>
    </div>
    </div>
</form>

<!-- 图片删除确认弹窗 用于喜欢页面和上传页面-->
        <div class="modal fade" id="confirm-delete" tabindex="-1" role="dialog">
          <div class="modal-dialog modal-sm" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    确定要删除这张图片？
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                </div>
                <div class="modal-body">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                 <a class="btn btn-danger btn-ok">确定</a>
              </div>
            </div><!-- /.modal-content -->
          </div><!-- /.modal-dialog -->
        </div><!-- /.modal -->
{% endblock %}

{% block scripts %}
{{super()}}
<script src="{{ url_for('static', filename='jquery-ui-1.12.1/jquery-ui.min.js') }}" type="text/javascript"></script>
<script src="{{ url_for('static', filename='js/core.js') }}" type="text/javascript"></script>
<script>
$('#confirm-delete').on('show.bs.modal', function(e) {
 $(this).find('.btn-ok').attr('href', $(e.relatedTarget).data('href')); // redirect the url
 $(".btn-ok").click(function() {
    $(e.relatedTarget).parent().slideUp(); // delete the photo
    $('#confirm-delete .close').click(); // close modal
 });
});
</script>
{% endblock %}